<template>
	<view class="user-info">
		<view class="user-setting">
			<view class="user">
				<image :src="shopInfo.logo" class="avatar"/>
				<view class="user-name">
					<view class="name">
						<view> {{shopInfo.name}} </view>
						<Tag :text="shopInfo.type == 2?'商家':'个人'" :bgc="shopInfo.type == 2?'#FF3B1E':'#FF9B05'"/>
					</view>
					<view class="id"> ID：{{shopInfo.id}} </view>
				</view>
			</view>
			<view class="setting">
				<image src="/static/icon/mine/setting.png" @tap="godis" class="s-img"/>
			</view>
		</view>
		<view class="to-day">
			<view class="item">
				<view class="label"> 今日收入(元) </view>
				<view class="value"> {{ todayPrice.num?todayPrice.num:'0.00' }} </view>
			</view>
			<view class="item">
				<view class="label"> 今日订单 </view>
				<view class="value"> {{ todayOrder.num?todayOrder.num: '0.00' }} </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import Tag from '@/components/Tag.vue';
	import { useUserStore, useShopStore } from '@/store/index.js'
	import { GetShopDetailsApi } from '@/service/shop.js'
	const props = defineProps(['todayPrice', 'todayOrder'])
	const shopInfo = ref({
		id: '',
		logo: '',
		name: '',
		type: '',
	})
	const godis = () => {
		uni.navigateTo({
			url: `/pages/shopPages/disposition/disposition?info=${JSON.stringify(shopInfo.value)}`
		})
	}
	const getShopInfo = () => {
		const { userInfo } = useUserStore()
		const { SETSHOPINFO } = useShopStore()
		let params = {
			latitude: '',
			longitude: '',
			shop_id: userInfo.shop_id
		}
		GetShopDetailsApi(params).then(res => {
			shopInfo.value = res
			SETSHOPINFO(res)
		})
	}
	onShow(() => {
		getShopInfo()
	})
</script>

<style scoped lang="scss">
	.user-info {
		padding: 10px;
		border-radius: 10px;
		margin-bottom: 10px;
		background-color: #fff;
		.user-setting {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.user {
				display: flex;
				align-items: center;
				.avatar {
					width: 54px;
					height: 54px;
					border-radius: 50%;
					margin-right: 10px;
				}
				.user-name {
					.name {
						height: 19px;
						display: flex;
						align-items: center;
						color: #333333;
						font-size: 16px;
						font-weight: 500;
						margin-bottom: 7px;
						view {
							margin-right: 6px;
						}
					}
				}
				.id {
					color: #666666;
					font-size: 12px;
					font-weight: 400;
					line-height: 22px;
				}
			}
			.setting {
				.s-img {
					width: 22px;
					height: 22px;
				}
			}
		}
		.to-day {
			display: flex;
			margin-top: 11px;
			.item {
				flex: 1;
				.label {
					font-weight: 400;
					font-size: 12px;
					color: #666666;
					line-height: 22px;
				}
				.value {
					font-weight: 700;
					font-size: 14px;
					color: #3D3D3D;
					line-height: 22px;
				}
			}
		}
	}
</style>